<template>
  <div class="container">
    <div class="box">
      <el-select id="select" style="width: 50%" v-model="value" placeholder="请选择需要查看的项目名称">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div>
        <el-button type="primary" round @click="research">查 找</el-button>
        <el-button type="danger" round @click="addStation">添加项目</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData_Project" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="负责人">
                <span>{{ props.row.projectLeader}}</span>
              </el-form-item>
              <el-form-item label="难度级别">
                <span>{{ props.row.difficultLevel }}</span>
              </el-form-item>
              <el-form-item label="负责部门">
                <span>{{ props.row.departmentName }}</span>
              </el-form-item>
              <el-form-item label="开始时间">
                <span>{{ props.row.projectStart}}</span>
              </el-form-item>
              <el-form-item label="结束时间">
                <span>{{ props.row.projectEnd }}</span>
              </el-form-item>
              <el-form-item label="项目内容">
                <span>{{ props.row.projectContent }}</span>
              </el-form-item>
              <el-form-item label="参与员工">
                <span>
                  <el-button type="primary" @click="getProjectEmployees(props.row.projectId,props.$index)">查看参与员工</el-button>
                  {{ props.row.participants }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="项目ID" prop="projectId"></el-table-column>
        <el-table-column label="项目名称" prop="projectName"></el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="DeleteProject(scope.row.projectId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--        添加项目弹框-->
    <el-dialog title="添加项目" :visible.sync="addDialogVisible" width="40%">
      <el-form ref="add_form_ref" :model="add_form">
        <el-form-item label="项目名称">
          <el-col :span="20">
            <el-input placeholder="请输入项目名称" v-model="add_form.projectName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="项目内容">
          <el-col :span="20">
            <el-input placeholder="开发数据库" v-model="add_form.projectContent"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="难度级别">
          <el-col :span="20">
            <el-input placeholder="1-99" v-model="add_form.difficultLevel" maxlength="2" show-word-limit></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-col :span="20">
            <el-input placeholder="2020-6-30" v-model="add_form.projectStart"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-col :span="20">
            <el-input placeholder="2020-6-30" v-model="add_form.projectEnd"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="项目负责人">
          <el-col :span="20">
            <el-input placeholder="1234567891" v-model="add_form.projectLeader"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="项目参与人员">
          <el-col :span="20">
            <el-input placeholder="1234567891,1234567982" v-model="add_form.participants"></el-input>
          </el-col>
        </el-form-item>
        <div>{{employees}}</div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_new_Project">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
export default {
  data() {
    return {
      search: "",
      tableData_Project: [],
      options: [],
      value: "",
      addDialogVisible: false,
      employees: [],
      add_form: {
        projectName: "",
        projectContent: "",
        projectStart: "",
        projectEnd: "",
        projectLeader: "",
        participants: "",
        difficultLevel: ""
      }
    };
  },
  methods: {
    addStation() {
      this.getEmployee();
      this.addDialogVisible = true;
    },
    //渲染数据
    fetch() {
      console.log("this_token=", this.$store.state.token);
      let data = { token: this.$store.state.token, region: null };
      this.$http.post("/getProjectInfo", data).then(res => {
        this.tableData_Project = res.data;
      });
    },
    getProjectEmployees(id, index) {
      let data = { token: this.$store.state.token, projectId: id };
      this.$http.post("/getProjectEmployeesInfo", data).then(res => {
        this.tableData_Project[index].participants = res.data.data;
      });
    },
    DeleteProject(projectId) {
      console.log(projectId);
      let data = { token: this.$store.state.token, projectId: projectId };
      this.$http.post("/deleteProject", data).then(res => {
        if (res.data.result == "success") {
          this.$message.success("删除成功");
          this.addDialogVisible = false
        } else {
          this.$message.error("没有权限");
        }
      });
    },
    //查找可用员工
    getEmployee() {
      let data = { token: this.$store.state.token, getWorkNumber: true };
      this.$http.post("getEmployees", data).then(res => {
        if (res.data.result != "error") {
          console.log(res.data);
          this.employees = res.data;
          console.log(this.employees);
        }
      });
    },
    //添加操作
    add_new_Project() {
      //首先判断数据是否为空 为空则不发送
      if (
        this.add_form.projectName === "" ||
        this.add_form.projectContent === "" ||
        this.add_form.difficultLevel === "" ||
        this.add_form.projectStart === "" ||
        this.add_form.projectEnd === "" ||
        this.add_form.projectLeader === "" ||
        this.add_form.participants === ""
      ) {
        console.log(this.add_form);
        this.$message.error("请填写所有内容");
      }
      //不为空发送
      else {
        console.log(this.add_form);
        //构造json数据
        let data = {
          token: this.$store.state.token,
          projectName: this.add_form.projectName,
          projectLeader: this.add_form.projectLeader,
          projectContent: this.add_form.projectContent,
          projectStart: this.add_form.projectStart,
          projectEnd: this.add_form.projectEnd,
          difficultLevel: this.add_form.difficultLevel,
          participants: this.add_form.participants
        };
        console.log(data);
        //发送给后台
        this.$http.post("addProject", data).then(res => {
          if (res.data.result == "success") {
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
        });
      }
    }
  },
  created() {
    this.fetch();
  }
};
</script>
